<template>
	<scroll-view scroll-y class="container" :style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
		<view class="fill-report">
			<view class="form">
				<view @click="selectOrderNum" class="form-item">
					<view class="label required">WO/EO/Research No.</view>
					<view class="form-content">
						<view class="form-text">{{ fillForm.orderNo || '' }}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view class="form-item">
					<view class="label">Project</view>
					<view class="form-content">
						<view class="form-text">{{ fillForm.pmName || '' }}</view>
					</view>
				</view>

				<view class="form-item">
					<view class="label">Location</view>
					<view class="form-content">
						<view class="form-text" style="max-width: 500rpx;">{{ fillForm.lineName || '' }}{{ fillForm.lineSiteSectionName  || ''}}</view>
					</view>
				</view>

				<view class="form-item" @click="showWorkTime = true">
					<view class="label required">工班類型</view>
					<view class="form-content">
						<view class="form-text">{{ fillForm.shiftType || '' }}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>

				<view class="form-item">
					<view class="label required">施工開始時間</view>
					<view @click="buildStartDatePicker = true" class="form-content">
						<view class="form-text" style="max-width: 336upx;">{{fillForm.constructionStartDate || ''}}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>
				<u-datetime-picker @confirm="confirmBuildStartDate" @cancel="buildStartDatePicker = false"
					v-model="timeVal" :show="buildStartDatePicker"  mode="datetime" />
				<view class="form-item">
					<view class="label required">施工結束時間</view>
					<view @click="buildEndDatePicker = true" class="form-content">
						<view class="form-text" style="max-width: 336upx;">{{fillForm.constructionEndDate || '' }}</view>
						<u-icon name="arrow-right" color="#a7aebd" size="16"></u-icon>
					</view>
				</view>
				<!-- :minDate="(new Date()).getTime()" -->
				<u-datetime-picker @confirm="confirmBuildEndDate" @cancel="buildEndDatePicker = false" v-model="timeVal"
					:show="buildEndDatePicker"  mode="datetime" />
				<view class="form-item">
					<view class="label required" style="width: 260rpx;">Scaffolding</view>
					<view class="form-content">
						<u--input inputAlign="right" v-model="fillForm.scaffolding" placeholder="請輸入"
							border="none" />
					</view>
				</view>
				<view class="form-item">
					<view class="label required" style="width: 260rpx;">Description</view>
					<view class="form-content">
						<u--input inputAlign="right" v-model="fillForm.description"  placeholder="請輸入"
							border="none" />
					</view>
				</view>
				<view style="padding: 40upx 0; background-color: #fff;">
					<view @click="toSelectPeople"
						style="display: flex; align-items: center; justify-content: center; height: 96upx; background: #f5f7fa; border-radius: 4upx; margin: 0 32upx;">
						<uni-icons type="plusempty" size="18" style="color: #2F80ED;"></uni-icons>
						<view style="font-weight: bold;color: #2F80ED;">選擇人員</view>
					</view>
				</view>
				<view class="uni-container">
					<uni-table ref="table" border stripe emptyText="暫無更多數據" width="200">
						<uni-tr>
							<uni-th  align="center" width="50">姓名</uni-th>
							<uni-th align="center" width="50">工號</uni-th>
							<uni-th  align="center" width="60">工種</uni-th>
							<uni-th  align="center" width="80">所屬單位</uni-th>
							<uni-th  align="center" width="50">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in fillForm.hkAttendancePersonList" :key="index">
							<uni-td align="center" width="50">{{ item.name || '' }}</uni-td>
							<uni-td align="center" width="50">{{ item.cicCardNo || '' }}</uni-td>
							<uni-td align="center" width="60">{{ item.label || '' }}</uni-td>
							<uni-td align="center" width="80">{{ item.unit || '' }}</uni-td>
							<uni-td width="50" align="center">
								<view style="color: #FF6A6A;" @click="delTableItem(index)">删除</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<u-picker :show="showWorkTime" :columns="timeColumns" @confirm="fnSureTime" @cancel="showWorkTime = false" keyName="name"></u-picker>
			<view class="footer-button">
				<view class="button-placeholder"></view>
				<view class="button-group">
					<button @click="clickSubmit" :loading="isLoading" class="button-primary">提交</button>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getSystemHeightInfo, isPositiveInteger, imgFun, getFormCheckResult } from "@/utils/common.js";
	import { handleFormatDate, compareDate } from "@/utils/date.js";
	import fileMixin from "@/mixins/file.js";
	import mixins from "@/utils/mixins.js"
	import { hkAttendanceSheet_save } from "@/api/HongKong/hkAttendanceSheet.js";
	export default {
		name: "fill-report",
		mixins: [fileMixin, mixins],
		props: {},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				timeVal: Number(new Date()),
				// 填报表单
				fillForm: {
					id:undefined,
					orderNo: undefined, //订单编号【订单编号】
					constructionStartDate: undefined, //施工开始时间【施工开始时间】
					constructionEndDate: undefined, //施工结束时间【施工结束时间】
					shiftType: undefined, //工班类型（字典配置 shift_type）【工班类型（字典配置 shift_type）】
					scaffolding: undefined, //脚手架【脚手架】
					description: undefined, //描述【描述】
					orderId: undefined, //订单id【订单id】
					name: undefined, //通用字段：名称
					hkAttendancePersonList:[],
					lineSiteSectionName:undefined,//区间站点名称
					lineName:undefined,//线路名称
					pmName:undefined,
					projectId:uni.getStorageSync('isOwner')

				},
				// 施工结束时间日期弹框显示状态
				buildStartDatePicker: false,
				buildEndDatePicker: false,
				// 是否在加载中
				isLoading: false,
				tableData: [],
				showWorkTime:false,
				timeColumns:[[]]
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		watch: {},
		mounted() {
			this.initContainerData();
			this.timeColumns = [this.$store.getters.dictMap['shift_type']]
		},

		methods: {
			selectOrderNum() {
				uni.navigateTo({
					url:`/subpackage-enginner/pages/engineeringMaintenance/personnelAttendance/select/select-order`,
					events: {
						getOrderInfo: (data) => {
							console.log(data.data)
							this.$set(this.fillForm, 'pmName', data.data.pmName)
							this.$set(this.fillForm, 'lineName', data.data.lineName)
							this.$set(this.fillForm, 'lineSiteSectionName', data.data.lineSiteSectionName)
							this.$set(this.fillForm, 'orderId', data.data.id)
							this.$set(this.fillForm, 'orderNo', data.data.orderNo || data.data.orderNo2)
						}
					},
					success: (res) => {
						res.eventChannel.emit('sendOrder', {
							data:this.fillForm.orderId || ''
						})
					}
				})
			},
			fnSureTime(obj){
				console.log(obj)
				this.fillForm.shiftType = obj.value[0].name
				this.showWorkTime = false
			},
			toSelectPeople() {
				uni.navigateTo({
					url:`/subpackage-enginner/pages/engineeringMaintenance/personnelAttendance/select/select-person`,
					events: {
						getPersonInfo: (data) => {
							console.log(data.data, '选择人员')
							this.fillForm.hkAttendancePersonList = data.data
						}
					},
					success: (res) => {
						res.eventChannel.emit('sendPerson', {
							data:this.fillForm.hkAttendancePersonList
						})
					}
				})
			},
			delTableItem(index) {
				this.fillForm.hkAttendancePersonList.splice(index, 1);
			},
			/** 初始化容器数据 */
			initContainerData() {
				const {
					stateHeight,
					bottomHeight,
					navbarHeight
				} = getSystemHeightInfo();

				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 70;
			},
			/** 保存每日交底填报的内容 */
			handleSaveFilleport() {
				console.log(this.fillForm,'入参')
				// return
				return new Promise(resolve => {
					hkAttendanceSheet_save(this.fillForm).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1000,
						});
						this.initFillForm();
						resolve();
					});
				});
			},
			/** 点击提交按钮 */
			async clickSubmit() {
				const codeArr = this.$store.getters.dictMap['gwgz'] || []
				this.fillForm.hkAttendancePersonList = this.fillForm.hkAttendancePersonList.map(it => ({
					personId:it.id,
					name:it.name,
					// jobTitle:codeArr.filter(item => (it.personJobTypeList.map(m => m.code)).includes(item.code)).map(na => na.name).join(',') || '',
					jobTitle:it.label,
					affiliatedUnit:it.unit || '',
					cardno:it.cicCardNo || ''
				}))
				// console.log(result, 'hha1')
				// return
				//不需要校验的字段
				const arr = ['id','pmName','orderId','lineName', 'lineSiteSectionName','name']
				if(this.fillForm.hkAttendancePersonList.length === 0) return this.$message('請添加人員！')
				// 表单校验...
				if (!getFormCheckResult(this.fillForm, arr)) {
					uni.showToast({
						title: "请检查表单是否填写完整",
						icon: "none"
					});
					this.fillForm.hkAttendancePersonList = []
					return;
				}
				if (!compareDate(this.fillForm.constructionEndDate, this.fillForm.constructionStartDate)) {
					uni.showToast({
						title: "施工结束时间不可早于施工开始时间！",
						icon: "none"
					});
					return;
				}
				// 调用接口...
				if (!this.isLoading) {
					this.isLoading = true;
					await this.handleSaveFilleport();
					this.isLoading = false;
				}
			},

			/** 初始化表单 */
			initFillForm() {
				this.$set(this.fillForm, 'id', undefined)
				this.$set(this.fillForm, 'orderNo', undefined)
				this.$set(this.fillForm, 'constructionStartDate', undefined)
				this.$set(this.fillForm, 'constructionEndDate', undefined)
				this.$set(this.fillForm, 'shiftType', undefined)
				this.$set(this.fillForm, 'scaffolding', undefined)
				this.$set(this.fillForm, 'description', undefined)
				this.$set(this.fillForm, 'orderId', undefined)
				this.$set(this.fillForm, 'name', undefined)
				this.$set(this.fillForm, 'hkAttendancePersonList', [])
				this.$set(this.fillForm, 'lineSiteSectionName', undefined)
				this.$set(this.fillForm, 'lineName', undefined)
				this.$set(this.fillForm, 'pmName', undefined)
			},
			confirmBuildStartDate(event) {
				this.fillForm.constructionStartDate = handleFormatDate(event.value, 3)
				this.buildStartDatePicker = false;
			},
			confirmBuildEndDate(event) {
				this.fillForm.constructionEndDate = handleFormatDate(event.value, 3)
				this.buildEndDatePicker = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.fill-report {
		.form {
			background: #fff;
			padding-top: 26upx;

			.form-item {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30upx;
				border-bottom: 1px solid #e2e5ed;

				&:last-of-type {
					border-bottom: none;
				}

				.label {
					color: #445469;
					line-height: 44upx;
					flex-shrink: 0;
				}

				.form-content {
					color: #22204e;
					display: flex;
					align-items: center;
				}

				.form-text {
					line-height: 58upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 302upx;
				}

				.form-text.none {
					opacity: .7;
					font-size: 30rpx;
				}

				.u-icon {
					margin-left: 40upx;
				}

				.uicon-close-circle-fill {
					margin-left: 32upx;
				}

				.u-input {
					width: 340upx;
					text-align: right;

					::v-deep .u-input__content__field-wrapper {
						margin-right: 24upx;
					}

					::v-deep .uni-input-wrapper {
						text-align: right;
					}
				}

				.u-switch {
					margin-right: 30upx;
				}
			}

			.no-inline {
				display: block;
				height: auto;

				.label {
					line-height: 100upx;
				}
			}
		}


	}

	.fill-report.mar-t {
		padding-top: 26upx;
	}

	.footer-button {
		height: 154upx;

		.button-placeholder {
			height: 100%;
		}

		.button-group {
			height: 154upx;
			padding: 30upx;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			width: 100vw;
			bottom: 0;
			z-index: 1;

			.button-primary {
				background: #2f80ed;
				border-radius: 4upx;
				color: #fff;
				font-weight: bold;
				line-height: 92upx;
				text-align: center;
			}
		}
	}

	.required {
		&::before {
			content: "*";
			color: #ff6a6a;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
</style>